<template>
  <div class="enter">
    <div class="closeWrapper">
      <span class="iconfont iconicon-test close" @click="retreat"></span>
    </div>
    <div class="logoWrapper">
      <span class="iconfont iconnew logo"></span>
    </div>
    <!-- 引入输入框 -->
    <Autinput
      textPlaceholder="用户名/手机号码"
      type="text"
      :rule="ruleUsername"
      errMsg="请输入正确的手机号码"
      @valChanged="setUsername"
    />
    <Autinput
      textPlaceholder="输入密码"
      type="password"
      :rule="rulepassword"
      errMsg="请输入3到9位的密码"
      @valChanged="setPassword"
    />
    <AuthBtn btnText="登录" @clicked="login" />
    <router-link to="Register" class="registered-account" @clicked="register">注册账户</router-link>
  </div>
</template>

<script>
import Autinput from "../components/Autinput";
import AuthBtn from "../components/AuthBtn";
import { log } from "util";
export default {
  data() {
    return {
      username: "",
      password: "",
      ruleUsername: "^\\d{5,11}$",
      rulepassword: "^.{3,9}$"
    };
  },
  components: {
    Autinput,
    AuthBtn
  },
  methods: {
    retreat() {
      this.$router.replace({ path: "/" });
    },
    login() {
      if (!this.username || !this.password) {
        this.$toast.fail("请输入完整信息");
        return;
      }
      var regExpUsername = new RegExp(this.ruleUsername);
      if (!regExpUsername.test(this.username)) {
        this.$toast.fail("用户名错误");
        return;
      }

      var regExpPassword = new RegExp(this.rulepassword);
      if (!regExpPassword.test(this.password)) {
        this.$toast.fail("密码错误");
        return;
      }
      // console.log("接受到子组件的点击事件，触发login函数");
      // console.log("用户名", this.username);
      // console.log("密码", this.password);
      this.$axios({
        url: "http://127.0.0.1:3000/login",
        method: "post",
        data: {
          username: this.username,
          password: this.password
        }
      }).then(res => {
        const { message, data } = res.data;
        // console.log(message);
        // console.log(data);
        // 打印token值
        // console.log(res.data.data.token);
        if (message == "登录成功") {
          localStorage.setItem("token", data.token);
          localStorage.setItem("userId", data.user.id);
          this.$toast.success(message);
          this.$router.replace({ path: "/" });
        } else {
          this.$toast.fail(message);
        }
      });
    },
    setUsername(username) {
      this.username = username;
    },
    setPassword(password) {
      this.password = password;
    },
    register() {
      console.log("点击了注册按钮");
    }
  }
};
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

ul,
li,
ol {
  list-style: none;
}
.enter {
  width: 100vw;
  // height: 166.67vw;
  margin: 0 auto;
  .closeWrapper {
    .close {
      font-size: 8.33vw;
    }
  }
  .logoWrapper {
    text-align: center;
    .logo {
      font-size: 27.78vw;
      color: #d81e06;
    }
  }
  .passwordWapper {
    margin-left: 6.94vw;
    input {
      border: none;
      border-bottom: 1px solid #000;
      width: 77.78vw;
      height: 16.67vw;
      //   清除input框的聚焦边框
      outline: none;
    }
  }
  .registered-account {
    float: left;
    margin-top: 10px;
    margin-left: 70.84vw;
    font-size: 4.44vw;
  }
}
</style>
